<template>
	<view>
		<view style="display: flex;flex-direction: row; padding: 10px 14px;">
			<view style="width: 65px;display: flex;align-items: center;">
				<span>车辆图片</span>
			</view>
			<view style="display: flex;max-width: 540rpx;flex-wrap:wrap">
				<u-image width="260rpx" height="260rpx" style="padding: 10rpx;" v-for="(item,index) in fileList" :key="index"  :src="item"></u-image>
			</view>
		</view>
		<u-field v-model="car.code" label="车牌号" placeholder="请填写车牌号" disabled/>
		<u-field v-model="car.type" label="类型" placeholder="请选择类型" disabled  />
		<u-field v-model="car.brand" label="品牌" placeholder="请填写品牌" disabled/>
		<u-field required v-model="time" label="上架时间" placeholder="请选择上架时间" @click="showCalendar" disabled/>
		<u-field required v-model="rent.rentFee" label="费用" placeholder="请填写车辆费用(元/天)" type="number" :disabled="disabled" />
		<u-field required v-model="rent.takePlace" label="取车地点" placeholder="请选择取车地点" disabled @click="chooseTakePlace" />
		<u-field required v-model="rent.backPlace" label="还车地点" placeholder="请选择还车地点" disabled @click="chooseBackPlace" />
		<u-calendar v-model="show" mode="range" @change="chooseRange"  start-text="开始时间"
			end-text='结束时间' :min-date="today" :max-date="targetDay" >
			<view slot="tooltip">
				<view class="title">
					请选择取车/还车时间
				</view>
			</view>
		</u-calendar>
		<u-button @click="publish" v-if="status=='发布'" shape="circle" :custom-style="{width:'100%',marginTop:'40rpx'}" type="primary"
			style="width: 86%;">发布车辆</u-button>
		<u-button @click="edit" v-if="status=='编辑'" shape="circle" :custom-style="{width:'100%',marginTop:'40rpx'}" type="primary"
			style="width: 86%;">更新发布</u-button>
		<u-button @click="modalShow = true" v-if="status=='编辑'" shape="circle" :custom-style="{width:'100%',marginTop:'40rpx'}" type="primary"
			style="width: 86%;">取消发布</u-button>
		<u-button @click="accept" v-if="status=='审核'" shape="circle" :custom-style="{width:'100%',marginTop:'40rpx'}" type="primary"
			style="width: 86%;">通过审核</u-button>
		<u-button @click="reject" v-if="status=='审核'" shape="circle" :custom-style="{width:'100%',marginTop:'40rpx'}" type="primary"
			style="width: 86%;">拒绝审核</u-button>
		<u-toast ref="uToast" />
		<u-modal v-model="modalShow" content="取消发布信息将丢失,是否取消?" @confirm="del" confirm-color="red" show-cancel-button></u-modal>
	</view>
</template>

<script>
	import SET from '@/SET.js'
	import moment from 'moment'
	export default {
		data() {
			return {
				show:false,
				baseUrl:SET.baseUrl,
				car: {},
				rent:{},
				imgs: [],
				mobile: '',
				fileList: [],
				today: moment().format('YYYY-MM-DD'),
				targetDay: moment().add(2, 'years').format('YYYY-MM-DD'),
				time:'',
				status:'',
				modalShow: false,
				disabled:false
			}
		},
		onLoad() {
		  // #ifdef APP-NVUE
		  const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
		  // #endif
		  // #ifndef APP-NVUE
		  const eventChannel = this.getOpenerEventChannel();
		  // #endif
		  // eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
		  // eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
		  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		  eventChannel.on('acceptDataFromOpenerPage', (data) =>{
		    this.car = data.car
				this.status = data.status
				if(this.status == '发布'){
					this.rent.carId = this.car.id
				}else if(this.status == '编辑' || this.status == '审核'){
					this.$api.getRent({carId:this.car.id}).then(res=>{
						this.rent = res.result.records[0]
						this.time = moment(this.rent.beginTime).format('YYYY-MM-DD') + ' 至 '+moment(this.rent.endTime).format('YYYY-MM-DD')
					})
				}
				if(this.status == '审核'){
					this.disabled = true
				}
				this.fileList = data.car.imgs.split(',').map(item=>{
					return this.baseUrl+item
				})
		  })
		},
		methods: {
			accept(){
				this.$api.acceptRent({id:this.rent.id}).then(res=>{
					if(res.code == 20000){
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success',
							callback(){
								uni.navigateBack()
							}
						})
					}
				})
			},
			reject(){
				this.$api.rejectRent({id:this.rent.id}).then(res=>{
					if(res.code == 20000){
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success',
							callback(){
								uni.navigateBack()
							}
						})
					}
				})
			},
			showCalendar(){
				if(this.disabled===false) {
					this.show=true
				}
			},
			del(){
				this.$api.delRent(this.rent.id).then(res=>{
					if(res.result=='删除成功!'){
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success',
							callback(){
								uni.navigateBack()
							}
						})
					}else{
						this.$refs.uToast.show({
							title: '删除失败',
							type: 'warning'
						})
					}
				})
			},
			edit(){
				this.rent.status = '待审核'
				this.$api.editRent(this.rent).then(res=>{
					console.log(res)
					if(res.result == '编辑成功!'){
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
							callback(){
								uni.navigateBack()
							}
						})
					}else{
						this.$refs.uToast.show({
							title: '修改失败,请勿重复发布',
							type: 'warning'
						})
					}
				})
			},
			publish(){
				this.rent.status = '待审核'
				this.$api.addRent(this.rent).then(res=>{
					if(res.result == '添加成功！'){
						this.$refs.uToast.show({
							title: '发布成功',
							type: 'success',
							callback(){
								uni.navigateBack()
							}
						})
					}else{
						this.$refs.uToast.show({
							title: '发布失败,请勿重复发布',
							type: 'warning'
						})
					}
				})
			},
			chooseRange(e) {
				this.time = e.startDate + ' 至 ' +e.endDate
				this.rent.beginTime = e.startDate
				this.rent.endTime = e.endDate
			},
			chooseTakePlace() {
				if(this.disabled === false){
					uni.chooseLocation({
						success: (res) => {
							this.rent.takePlace = res.address
							this.$forceUpdate()
						}
					})
				}
			},
			chooseBackPlace() {
				if(this.disabled === false){
					uni.chooseLocation({
						success: (res) => {
							this.rent.backPlace = res.address
							this.$forceUpdate()
						}
					})
				}
			},
		}
	}
</script>

<style>
	.title {
		color: $u-type-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
